<template>
  <div
    id="sidebar"
    w="full"
    h="full"
    overflow="auto"
    class="fixed left-0 top-0"
    bg="light-100/500"
    border="~ transparent r-light-600/500"
    sm="w-38 p-3"
    md="w-50 p-4"
    lg="w-55 p-5"
    xl="w-60 p-6"
  >
    <router-link
      v-for="route in showList"
      :custom="true"
      v-slot="{ isActive, navigate, href }"
      :key="route.path"
      :to="route.path"
    >
      <a
        :href="href"
        @click="navigate"
        class="h-10 leading-10 flex justify-center items-center mb-3 px-3 rounded-md bg-light/50 font-mono text-shadow-md cursor-pointer whitespace-nowrap transition"
        :class="{ 'bg-light-500': isActive }"
      >
        {{ route.meta?.title }}
      </a>
    </router-link>
  </div>
</template>

<script setup lang="ts">
import { RouteRecordRaw } from 'vue-router';

const router = useRouter();
const routes = router.options.routes;

const whiteList = ['/answer', '/score', '/'];

const everyOne = (route) => whiteList.every((item) => item !== route.path);

const showList = ref<RouteRecordRaw[]>(
  routes.filter((route) => everyOne(route))
);
</script>

<style scoped>
#sidebar {
  overflow-y: auto;
}
</style>
